<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { OInput, OIcon, OIconSearch, vOutClick } from '@opensig/opendesign';
import IconSearch from '~icons/app/icon-search.svg';
import { getHotSearchApi, getSearchWordApi } from '@/api/api-search.ts';
import { useData } from 'vitepress';
import type { WordSearchT } from '@/@types/type-search.ts';
import { useLocale } from '@/composables/useLocale.ts';
import HistoryAndHots from '@/components/search/HistoryAndHots.vue';
import RecommendList from '@/components/search/RecommendList.vue';
import { useScreen } from '@/composables/useScreen.ts';
import useDebounceFn from '@/composables/useDebounceFn.ts';
import { useSearchHistoryStore } from '@/stores/common.ts';

const { lang } = useData();
const searchValue = ref('');
const showPanel = ref(false);
const target = ref(null);
const showDrawer = ref(false);
const inputFocus = () => {
  showPanel.value = true;
  showDrawer.value = true;
};
const clickOutside = () => {
  showPanel.value = false;
  showDrawer.value = false;
  searchValue.value = '';
};
const clearSearchData = () => {};
const confirmSearch = () => {
  handleSearch(searchValue.value);
};
// -------------------- 搜索历史 --------------------
const searchHistoryStore = useSearchHistoryStore();
const handleSearch = (searchValue: string) => {
  searchHistoryStore.add(searchValue);
  clickOutside();
  location.href = '/search/result?keyword=' + searchValue;
};

// -------------------- 搜索推荐 --------------------
const recommendData = ref<WordSearchT[]>([]);

const queryGetSearchRecommend = useDebounceFn(async (val: string) => {
  recommendData.value = await getSearchWordApi(val, lang.value);
  recommendData.value.forEach((item) => {
    item.strs = item.key.replaceAll(val, `<span class="highlight">${val}</span>`);
  });
}, 300);

watch(
  () => searchValue.value,
  (val: string) => {
    if (val) {
      queryGetSearchRecommend(val);
    } else {
      recommendData.value = [];
    }
  }
);

// -------------------- 热门搜索 --------------------
const hotSearchList = ref<string[]>([]); // 热门搜索列表
const getHotSearch = async () => {
  hotSearchList.value = await getHotSearchApi();
};

onMounted(() => {
  getHotSearch();
});
// -------------------- 输入框提示词 --------------------
const { t } = useLocale();
const placeholder = computed(() => {
  return showPanel.value ? t('header.search') : t('header.search2')
})

const { isPhone, isPad } = useScreen();

const clickSearchIcon = () => {
  if (isPhone.value) {
    location.href = '/search/page'
  } else if (isPad.value) {
    inputFocus();
  }
}
</script>

<template>
  <div class="header-search" v-out-click="clickOutside">
    <div class="search-panel" :class="{ 'search-success': showPanel }" ref="target">
      <OIcon class="search-icon" @click="clickSearchIcon">
        <OIconSearch class="input-icon"></OIconSearch>
      </OIcon>
      <OInput
        :placeholder="placeholder"
        :style="{ width: showPanel ? '380px' : '160px' }"
        @focus="inputFocus"
        @click="inputFocus"
        v-model="searchValue"
        :max-length="100"
        :input-on-outlimit="false"
        @keyup.enter="confirmSearch"
        @clear="clearSearchData"
        clearable
      >
        <template #prefix>
          <OIcon class="input-icon">
            <IconSearch />
          </OIcon>
        </template>
      </OInput>

      <div v-show="showPanel" class="drawer">
        <RecommendList
          v-if="recommendData.length && searchValue"
          :search-value="searchValue"
          :recommend-data="recommendData"
          @click-outside="clickOutside"></RecommendList>
        <div v-else>
          <HistoryAndHots @click-outside="clickOutside"></HistoryAndHots>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header-search {
  position: relative;
  height: var(--layout-header-height);

  :deep(.o-input) {
    margin-left: 16px;
    margin-right: 16px;
    transition: width var(--o-easing-standard-in) var(--o-duration-m2);

    .o_input-suffix {
      display: none;
    }

    .o_box,
    .o_input {
      width: 100%;
    }
  }
}

.search-panel {
  width: 192px;
  background-color: var(--o-color-fill2);
  height: var(--layout-header-height);
  position: absolute;
  z-index: var(--layout-header-z-index);
  top: 0;
  right: 0;
  border-radius: var(--o-radius-s) var(--o-radius-s) 0 0;
  transition: width var(--o-easing-standard-in) var(--o-duration-m2);
  .search-icon {
    display: none;
    cursor: pointer;
  }
  .o-input {
    margin-top: calc((var(--layout-header-height) - 32px) / 2);
    --o-control_size-m: 32px;
  }
  .input-icon {
    font-size: 24px;
  }
  &::after {
    content: '';
    position: absolute;
    //height: var(--o-gap-4);
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--o-color-fill2-4);
    z-index: 2;
    mix-blend-mode: normal;
  }
}

.search-success {
  box-shadow: var(--o-shadow-2);
  width: 412px;
  transition: width var(--o-easing-standard-in) var(--o-duration-m2);
}

.drawer {
  display: block;
  position: absolute;
  right: 0px;
  top: var(--layout-header-height);
  height: auto;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 12px 24px rgba(var(--o-mixedgray-13), 0.15);
  backdrop-filter: blur(5px);
  padding: var(--o-gap-5);
  padding-top: var(--o-gap-2);
  background: var(--o-color-fill2);
  border-radius: 0 0 4px 4px;
  z-index: calc(var(--layout-header-z-index) + 1);

  .hots {
    .hots-title {
      @include tip2;
      color: var(--o-color-info3);
      padding-bottom: var(--o-gap-2);
    }

    .hots-list-item {
      font-size: 14px;
      line-height: 32px;
      padding-left: var(--o-gap-2);
      cursor: pointer;

      .search-key {
        color: var(--o-color-ubmc);
      }

      @include hover {
        background-color: var(--o-color-control2-light);
        border-radius: var(--o-radius-s);
      }
    }
  }
}

.history-container {
  .title {
    @include tip2;
    color: var(--o-color-info3);
  }

  .history-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icon {
      cursor: pointer;
    }
  }

  .history {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;

    .history-item {
      cursor: pointer;
      background-color: var(--o-color-fill3);
      border-radius: var(--o-radius-xs);
      margin-top: var(--o-gap-2);
      height: 24px;
      max-width: 224px;
      display: flex;
      align-items: center;
      padding: 0 var(--o-gap-3);
      position: relative;

      .icon-container {
        display: none;
      }

      @include hover {
        background-color: rgba(235, 241, 250, 1);
        color: var(--o-color-ubmc);

        .icon-container {
          display: inline-block;
          position: absolute;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: rgb(var(--o-mixedgray-9));
          right: -8px;
          top: -10px;
        }
      }

      .icon {
        height: 16px;
        width: 16px;
      }

      &.dark {
        @include hover {
          background-color: rgb(var(--o-mixedgray-7));
        }
      }

      .history-text {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        @include tip2;
      }
    }
  }

  .split-line {
    background: var(--o-color-control4);
    width: 100%;
    height: 1px;
    margin: var(--o-gap-4) 0;
  }
}

.search-recommend {
  margin-bottom: var(--o-gap-3);

  .recommend-item {
    font-size: 14px;
    line-height: 32px;
    padding-left: var(--o-gap-2);
    cursor: pointer;

    .search-key {
      color: var(--o-color-ubmc);
    }

    @include hover {
      background-color: var(--o-color-control2-light);
      border-radius: var(--o-radius-s);
    }
  }
}
@include respond-to('<=pad') {
  .header-search {
    .search-panel {
      width: 24px;
      display: flex;
      align-items: center;
      transition: width ease-in-out .1s;
      .search-icon {
        display: block;
        font-size: 24px;
      }
      @include respond-to('pad_h') {
        right: 16px;
      }
      .o-input {
        display: none;
        width: 0;
        transition: width ease-in-out .1s;
        --input-radius: 4px;
      }
      &.search-success {
        width: 232px;
        .search-icon {
          display: none;
        }
        .o-input {
          display: block;
          width: 200px !important;
        }
      }
    }
  }
}
@include respond-to('phone') {
  .header-search {
    .search-panel {
      &.search-success {
        position: fixed;
        width: 100vw;
        left: 0;
        right: 0;
        top: -8px;
        background-color: var(--o-color-fill2);
        z-index: 1;
      }
    }
  }
}
</style>
